<template>
	<view class="root">
		<view class="header">
			<image class="img" src="@/static/icon/success-icon.png" mode=""></image>
			<view class="title">
				{{props.title}}
			</view>
		</view>
		<view class="body">
			<view class="thanks-content">
				{{props.thanksText}}
			</view>
		</view>
		<view class="bottom">
			<button class="button1" @click="props.onClick1">{{props.buttonText1}}</button>
			<button class="button2" @click="props.onClick2">{{props.buttonText2}}</button>
		</view>
	</view>
</template>

<script setup>
const props = defineProps({
	title: {
		type: String,
		default: '执行成功'
	},
	thanksText: {
		type: String,
		default: '感谢您的支持，期待下次能为您做的更好，祝您生活愉快。'
	},
	buttonText1: {
		type: String,
		default: 'buttonContent1'
	},
	buttonText2: {
		type: String,
		default: 'buttonContent2'
	},
	onClick1: {},
	onClick2: {},
})



</script>

<style lang="scss" scoped>

	.root {
		display: flex;
		flex-direction: column;
		.header {
			height: 500rpx;
			display: flex;
			flex-direction: column;
			gap: 70rpx;
			align-items: center;
			justify-content: center;
			.img {
				// aspect-ratio: 1 / 1;
				// width: 200px;
				width: 210rpx;
				height: 230rpx;
			}
			.title {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 40rpx;
			}
		}
		.body {
			height: 120rpx;
			.thanks-content {
				text-align: center;
				font-size: 29rpx;
				color: #A0A0A0;
			}
		}
		.bottom {
			display: flex;
			flex-direction: column;
			padding-left: 30rpx;
			padding-right: 30rpx;
			gap: 30rpx;
			&>button {
				width: 100%;
				border-radius: 20rpx;
			}
			.button1 {
				background-color: #35ad1a;
				color: white;
			}
			.button2 {
				background-color: white;
				border: 1rpx solid black;
			}
		}
	}
	
	
</style>